<%@page import="com.bionic.banking.core.enums.*"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@taglib uri="../WEB-INF/taglib.tld" prefix="m" %> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Run a bank operation</title>
        <script type="text/javascript" src="../resources/script/ui/jquery.ui.autocomplete.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                                              
                //autocomplete comcoboxs
                $("#baseAccountId").combobox();
                $("#targetAccountId").combobox();
                                
                //TODO: on load of base acount force refreshing related balance \currency
                $("#baseAccountOption").click();              
                
                $("[required=true]").after("<span></span>");                                    
                $("#btnSubmit").click(function(){                                
                    var error=false;
                    $("span").text("");//Clear all error message
                                
                    $("[class~=Red]").removeClass("Red");
                    if(trim($("#transactionType").val())==""){
                        $("#transactionType").next().text(" Please enter operation");
                        $("#transactionType").addClass("Red");
                        error=true;
                    } 
                    if(trim($("#currency").val())==""){
                        $("#currency").next().text(" Please choose currency");
                        $("#currency").addClass("Red");
                        error=true;
                    }
                    if(trim($("#amount").val())==""){
                        $("#amount").next().text(" Please set amount");
                        $("#amount").addClass("Red");
                        error=true;
                    }                    
                    $("[class=Red]").eq(0).focus();
                    return !error;
                });   
                
                //show account details
                $("#dialog-form" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {			
				Cancel: function() {
					$( this ).dialog( "close" );
				}},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});

		$("#view_account_details" ).button().click(function() {
                                             $("#dialog-form" ).dialog("open");
                                           });
                        
            });
             
            function fillBalance(balance, currency)
            {
                //alert(balance);
                $("#balance").val(balance);
                //$("#baseCurrency").val(currency);
                $("#currency").val(currency);
            }
            
            function trim(x) {
                return x.replace(/^\s+|$\s+/,'');
            }                
                    
        </script>
        
        <style type="text/css">	
            .ui-combobox {
                    position: relative;
                    display: inline-block;
            }
            .ui-combobox-toggle {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    margin-left: 0px;
                    padding: 0;
                    /* support: IE7 */
                    height: 1.8em;
                    width: 1em;
                    top: 0.1em;
            }
            .ui-combobox-input {
                    margin: 0;
                    padding: 0.3em;
            }                    
        </style>
    </head>
    <body>
        <h3>Make bank operation</h3>       
        <jsp:useBean id="domainHelperBean" class="com.bionic.banking.logic.DomainUtil" />
        <jsp:useBean id="accountBean" class="com.bionic.banking.logic.controller.BankAccountController" />
        <jsp:useBean id="customerBean" class="com.bionic.banking.logic.controller.CustomerController" /> 
        <form id="newBankTransactionForm" action="../Controller" method="POST">
            <input type="hidden" name="command" value ="createBankOperation"/>       
            <table id="tblBankTransaction" border="1" >        
                <tr>
                    <td>Operation</td>
                    <td>
                        <strong> 
                            <input id="transactionType" name="transactionType" 
                                   value="${param.txType}" style="background: transparent" readonly/> 
                        </strong>                     
                    </td>
                    <td>Description</td>
                    <td><input  type="text" id = "description" name="description"  /></td>
                </tr>                                          
                <tr>
                    <td>Base account:</td>
                    <td> 
                        <select name="baseAccountId" id="baseAccountId" />
                             <option value="">Select one...</option>
                                <c:forEach var="item" begin="0" 
                                           items="${accountBean.getCustomerAccounts(myCustomerId)}">
                                    <option value="${item.toString()}"
                                        title="${customerBean.getDetails(item.getCustomerId())}"
                                        onclick="fillBalance(${item.getBalance()}, ${item.getCurrencyId()});"
                                    >${item.toString()}</option>
                               </c:forEach>
                        </select>                                         
                    </td>
                    <td>Balance</td>
                    <td>  
                        <input id = "balance" name="balance" readonly style="background: transparent" />
                        <select name="currency" id="currency" >
                            <c:forEach var="item" items="${domainHelperBean.getCurrencies()}">
                                <option value="${item.getCode()}"> ${item} </option>
                            </c:forEach>
                        </select>
                    <td>
                </tr>
                <tr>
                    <td><strong> Amount </strong> </td>
                    <td><input id = "amount" name="amount" required="true"
                               <m:maskedInput mask="^[0-9]{0,10}[.]?[0-9]{0,10}$"/> /></td>            
                    <td>
                        <!--select name="currency" id="currency">
                            <c:forEach var="item" items="${domainHelperBean.getCurrencies()}">
                                <option value="${item.getCode()}"> ${item}</option>
                            </c:forEach>
                        </select-->
                    </td>
                    <td style="visibility:${param.txType =='TransferFunds'?'visible':'hidden' }">
                        To account:            
                              <select name="targetAccountId" id="targetAccountId" />                
                                         <option value="">Select one...</option>
                                         <c:forEach var="item" begin="0" items="${accountBean.getAll()}">
                                             <option value="${item.toString()}"
                                                     title="${customerBean.getDetails(item.getCustomerId())}"
                                                 >${item.toString()}</option>
                                         </c:forEach>
                              </select>                        
                    </td>
                </tr>
            </table>             
            <input type="submit" id="btnSubmit" value="Accept" />        
            <a href="Controller?command=viewTransactionsList"><strong>Go to List</strong></a>           
        </form>      
    </body>
</html>
